<template>
	<div id="app">
		<a-layout id="bg">
			<a-page-header style="background-color: #FFFFFF;border: 1px solid rgb(225, 227, 229)" title="KapokMQ Console" sub-title="    ">
				<template slot="tags">
					<a href="https://github.com/dpwgc/kapokmq" style="font-size: 16px;">Github</a>
					<a-divider type="vertical" />
					<a href="https://gitee.com/dpwgc/kapokmq" style="font-size: 16px;">Gitee</a>
				</template>
				<template slot="extra">
					<a-tag color="blue" v-show="address!=''">
						{{address}}
					</a-tag>
					<a-tag color="#52c41a" v-show="isPing">
						Connected
					</a-tag>
					<a-tag color="#f5222d" v-show="!isPing">
						Not connected
					</a-tag>
				</template>
			</a-page-header>
			<a-layout>
				<a-layout-sider v-model="collapsed" collapsible :theme="topicColor">
					<div style="width: 100%;height: 100%;">
						<a-menu :inline-collapsed="collapsed" mode="inline" :default-selected-keys="['1']"
							@click="handleClick" style="height: 100%;" :theme="topicColor">
							<a-menu-item key='1'>
								<a-icon type="appstore" />
								<span>
									Configure
								</span>
							</a-menu-item>
							<a-menu-item key='2'>
								<a-icon type="laptop" />
								<span>
									Monitor
								</span>
							</a-menu-item>
							<a-menu-item key='3'>
								<a-icon type="unordered-list" />
								<span>
									Message
								</span>
							</a-menu-item>
							<a-menu-item key='4'>
								<a-icon type="fork" />
								<span>
									Cluster
								</span>
							</a-menu-item>
						</a-menu>
					</div>
				</a-layout-sider>
				<a-layout-content>
					<router-view></router-view>
				</a-layout-content>
			</a-layout>
		</a-layout>
	</div>
</template>

<script>
	export default {
		name: 'app',
		data() {
			return {
				//服务端是否正常运行
				isPing: false,

				//安全访问密钥
				secretKey: '',
				//消息队列地址
				address: '',

				//菜单伸缩
				collapsed: true,

				//主题颜色
				topicColor: "dark",
			};
		},
		mounted: function() {
			// 在页面加载时请求数据
			setTimeout(() => {
				
				this.secretKey = sessionStorage.getItem('secretKey');
				this.address = window.location.origin
				sessionStorage.setItem('address', this.address);
				this.ping();
			}, 100);
		},
		methods: {
			//检查连接情况
			ping() {
				this.$postform('/Console/Ping')
					.then(res => {

						if (res.code == 0) {
							this.$message.success('Connection succeeded');
							this.isPing = true;
						} else {
							this.$message.error('Not online');
							this.isPing = false;
						}

					})
			},

			handleClick(e) {
				switch (e.key) {
					case '1':
						this.$router.push('/Console');
						break;

					case '2':
						this.$router.push('/Console/Monitor');
						break;

					case '3':
						this.$router.push('/Console/Message');
						break;

					case '4':
						this.$router.push('/Console/Cluster');
						break;
				}
				console.log(e)
			},
		}
	}
</script>

<style>
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: left;
		color: #2c3e50;
	}

	#bg {
		padding: 0px;
		margin: 0px;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		border: hidden;
	}
</style>
